import {PureComponent} from "react";
import {connect} from 'react-redux';
import {addAction, subAction} from "./store/modules/count";

class About extends PureComponent {
    render() {
        const {count, addNumber, subNumber} = this.props;
        return (
            <div>
                <div>About page:{count}</div>
                <button onClick={() => addNumber(2)}>+2</button>
                <button onClick={() => subNumber(2)}>-2</button>
            </div>
        )
    }
}


// 将store属性映射到props中去
const mapStateToProps = (state) => ({count: state.count.count})
// 将dispatch映射到props中去(降低componentDidMount中store.dispatch与组件的耦合度)
const mapDispatchToProps = (dispatch) => ({
    addNumber: (num) => dispatch(addAction(num)),
    subNumber: (num) => dispatch(subAction(num)),
})

// connect()返回值是高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(About)